<template>
    <view class="content">
        <view class="head-wrap">
            <image src="@/static/images/bg.jpg" mode="scaleToFill" class="bg" />
            <view class="head-wrap-info">
                <view class="head-wrap-info-content">
                    <view class="head-wrap-info-content-left">
                        <view class="head-wrap-info-content-left-name">即刻发布需求</view>
                        <view class="head-wrap-info-content-left-tip">发布需求找到合适的人才</view>
                    </view>
                    <view class="head-wrap-info-content-right">
                        <image src="@/static/images/index/settled_tip.png" mode="scaleToFill"
                            style="width: 100%;height: 100%;" />
                    </view>
                </view>
            </view>
        </view>
        <view class="main">
            <view class="main-wrap">
                <up-form labelPosition="left" :model="state.model" :rules="state.rules" ref="formRef">
                    <up-form-item label="项目名称" prop="sendInfo.name" :labelWidth="85" borderBottom ref="item1" required>
                        <up-input v-model="state.model.sendInfo.name" border="none" placeholder="请输入项目名称"
                            :adjustPosition="false"></up-input>
                    </up-form-item>
                    <!-- <up-line></up-line> -->
                    <up-form-item label="项目预算" prop="sendInfo.budgetAmount" :labelWidth="85" borderBottom ref="item1"
                        required>
                        <up-input v-model="state.model.sendInfo.budgetAmount" disabledColor="#ffffff" border="none"
                            placeholder="请输入项目预算" :adjustPosition="false"></up-input>
                    </up-form-item>
                    <up-form-item label="工作类型" prop="sendInfo.workType_text" :labelWidth="85" borderBottom ref="item1"
                        required>
                        <up-input v-model="state.model.sendInfo.workType_text" disabledColor="#ffffff" border="none"
                            placeholder="请选择工作类型" disabled :adjustPosition="false"></up-input>
                        <template #right>
                            <up-icon name="arrow-right" @click="showActionSheet(0,'workType');"></up-icon>
                        </template>
                    </up-form-item>
                    <up-form-item label="职位类型" prop="sendInfo.jobGroupId_text" :labelWidth="85" borderBottom ref="item1"
                        required>
                        <up-input v-model="state.model.sendInfo.jobGroupId_text" disabledColor="#ffffff" border="none"
                            placeholder="请选择工作职位" disabled :adjustPosition="false"></up-input>
                        <template #right>
                            <up-icon name="arrow-right" @click="showActionSheet(1,'jobGroupId');"></up-icon>
                        </template>
                    </up-form-item>
                    <up-form-item label="项目周期" prop="sendInfo.cycle_text" :labelWidth="85" borderBottom ref="item1">
                        <up-input v-model="state.model.sendInfo.cycle_text" disabledColor="#ffffff" border="none"
                            placeholder="请选择项目周期" disabled :adjustPosition="false"></up-input>
                        <template #right>
                            <up-icon name="arrow-right" @click="showActionSheet(2,'cycle');"></up-icon>
                        </template>
                    </up-form-item>
                    <up-form-item label="项目内容" prop="sendInfo.content" :labelWidth="85" ref="item1" required>
                        <up-textarea v-model="state.model.sendInfo.content" placeholder="请输入内容"
                            :adjustPosition="false"></up-textarea>
                    </up-form-item>
                </up-form>
                <up-action-sheet :show="state.showSheet" :actions="state.curSheetList"
                    :title="state.curSheetKey=='workType'?'请选择工作类型':(state.curSheetKey=='jobGroupId'?'请选择工作职位':'请选择项目周期')"
                    description="" @close="state.showSheet = false" @select="sexSelect" cancelText="取消">
                </up-action-sheet>
            </view>
            <view class="main-action">
                <up-button @click="submit" class="main-action-button" text="发布"></up-button>
            </view>
        </view>
    </view>
</template>
<script setup>
import { ref, reactive, getCurrentInstance, onMounted } from 'vue';
const { proxy } = getCurrentInstance()
// 使用 reactive 创建响应式状态  
const state = reactive({
    showSheet: false,
    model: {
        sendInfo: {
            workType: '',// 用工类型
            workType_text: "",
            name: '',  // 名称
            cycle: '', // 周期
            cycle_text: 0,
            budgetAmount: '', // 金额
            content: '', // 内容
            jobGroupId: '', // 职位类型
            jobGroupId_text: "",
        },
    },
    curSheet: 0,
    curSheetKey: '',
    curSheetList: [],
    sheet: [
        [
            { name: '兼职', id: 2 },
            { name: '全职', id: 1 }
        ],
        [

        ], [
            { name: '7天', id: 7 },
            { name: '14天', id: 14 },
            { name: '30天', id: 30 },
        ]
    ],
    rules: {
        'sendInfo.name': [
            {
                type: 'string',
                required: true,
                message: '请填写项目名称',
                trigger: ['blur', 'change'],
            },
            {
                max:12,
                message: '长度超出上限',
                trigger: ['blur', 'change'],
            }
        ],
        'sendInfo.workType': {
            type: 'string',
            required: true,
            message: '请选择工作类型',
            trigger: ['blur', 'change'],
        },
        'sendInfo.cycle': {
            type: 'string',
            required: true,
            message: '请选择项目周期',
            trigger: ['blur', 'change'],
        },
        'sendInfo.budgetAmount': {
            type: 'string',
            required: true,
            message: '请填写项目预算',
            trigger: ['blur', 'change'],
        },
        'sendInfo.content': {
            type: 'string',
            required: true,
            message: '请填写项目内容',
            trigger: ['blur', 'change'],
        },
        'sendInfo.jobGroupId': {
            type: 'string',
            required: true,
            message: '请选择职位类型',
            trigger: ['blur', 'change'],
        },

    },
    radio: '',
    switchVal: false,
    current: 0
});


// 使用 ref 创建响应式引用  
const formRef = ref(null);

// 定义方法  
function sexSelect(e) {
    state.model.sendInfo[state.curSheetKey] = e.id;
    state.model.sendInfo[`${state.curSheetKey}_text`] = e.name;
    console.log(state.model.sendInfo[`${state.curSheetKey}_text`])
    // if (formRef.value) {
    //     formRef.value.validateField(`sendInfo.${state.curSheetKey}`);
    // }
}


function showActionSheet(type, key) {
    console.log(type)
    state.curSheet = type
    state.curSheetKey = key
    state.curSheetList = state.sheet[state.curSheet]
    state.showSheet = true
}

async function getJobGroupList() {
    const res = await proxy.request('/job/get/group/list', {}, {
        method: 'GET'
    })

    console.log(res)
    state.sheet[1] = res.data.data
}
function submit() {
    console.log(formRef.value)
    // next()
    formRef.value?.validate().then(async (valid) => {
        if (valid) {

            uni.showLoading()
            const res = await proxy.request('/workitem/save', state.model.sendInfo)
            if (res.code == 200) {
               setTimeout(() => {
                formRef.value?.resetFields()
                formRef.value?.clearValidate()
                uni.hideLoading()
                uni.navigateBack()
               }, 750);
            }
            console.log(res)
        } else {
            uni.$u.toast('请检查信息是否填写完整')
        }
    }).catch(() => {
        // 处理验证错误  
        uni.$u.toast('请检查信息是否填写完整')
    });

}

function next() {
    state.current = 1
}
function hideKeyboard() {
    debugger
    uni.hideKeyboard()
}

onMounted(() => {
    getJobGroupList()
})
</script>
<style lang="scss">
page {
    background-color: #F5F5F5;
}
</style>
<style lang="scss" scoped>
::v-deep .u-action-sheet__item-wrap {
    overflow: auto;
    max-height: 50vh;
}

.head-wrap {
    position: relative;

    .bg {
        width: 100%;
        margin-top: -88rpx;
    }

    &-info {
        position: absolute;
        top: 36rpx;
        left: 32rpx;
        right: 32rpx;

        &-content {
            display: flex;
            align-items: center;
            justify-content: space-between;
            height: 220rpx;

            &-left {
                &-name {
                    margin-bottom: 20rpx;
                    font-family: PingFang SC, PingFang SC;
                    font-weight: 600;
                    font-size: 48rpx;
                    color: #FFFFFF;
                    line-height: 56rpx;
                    text-align: left;
                    font-style: normal;
                    text-transform: none;
                }

                &-tip {
                    font-family: PingFang SC, PingFang SC;
                    font-weight: 400;
                    font-size: 28rpx;
                    color: #FFFFFF;
                    line-height: 33rpx;
                    text-align: left;
                    font-style: normal;
                    text-transform: none;
                }
            }

            &-right {
                width: 220rpx;
                height: 220rpx;
            }
        }
    }


}

.main {
    // margin-top: 32rpx;
    padding: 32rpx;

    &-wrap {
        // height: 312rpx;
        background: #FFFFFF;
        padding: 20rpx 48rpx;
        box-sizing: border-box;
        border-radius: 12rpx 12rpx 12rpx 12rpx;
    }

    &-action {
        margin-top: 32rpx;

        ::v-deep .u-button {
            width: 480rpx;
            height: 80rpx;
            background: #F2CB51;
            border-radius: 58rpx 58rpx 58rpx 58rpx;
        }

    }
}
</style>